<template>
    <header>
        <van-nav-bar title="密码设置" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <div class="register-form">
        <div class="form-input">
            <!-- <van-field v-model="password" :type="!type ? 'password' : 'text'" placeholder="请设置6-20位登录密码"
                @click-right-icon="type = !type" clearable :right-icon="type ? 'eye-o' : 'closed-eye'" /> -->

            <!-- 密码输入框 -->
            <van-password-input :value="value" info="密码为 6 位数字" :error-info="errorInfo" :focused="showKeyboard"
                @focus="showKeyboard = true" />
            <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />

        </div>
        <div class="bottom-bar">
            <van-button type="primary" @click="finish" :disabled="!flag" block round>注册</van-button>
            <van-button plain type="primary" block round to="/Login">去登录</van-button>
        </div>
    </div>
</template>

<script>
import { doRegister } from '@/apis/user';
import { showToast } from 'vant';
export default {
    data() {
        return {
            type: true,
            password: '123456',
            tel: '',
            //密码输入框
            value: '',
            errorInfo: '',
            showKeyboard: true,
        }
    },
    created() {
        this.tel = localStorage.getItem("tel")
    },
    methods: {
        finish() {
            doRegister({
                loginname: this.tel,
                password: this.password
            }).then(res => {
                if (res.data.code != 200) return showToast('注册失败')
                this.$router.push('/login')
            })
        },
        onClickLeft() {
            this.$router.back()
        }
    },
    computed: {
        flag() {
            return /^\d{6}$/.test(this.password)
        }
    },
}
</script>

<style lang="less" scoped>
.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 10px 16px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
    display: flex;
    gap: 12px;
}
</style>